<template>

    <!-- toRefs 和watch监听的写法-->
    <div>
        姓名:{{ name }}
        年龄：{{ num }}
    </div>

    <button @click="handleCK">
        按钮2++
    </button>
    <button @click="handclkName">改变名称</button>
</template>

<script lang='ts' setup>
import { reactive, toRefs, watch } from "vue"
    
let obj = {
    num:20,
    name:'眼里有光'
}
let {num,name} = toRefs(reactive(obj))

const handleCK = ()=>{
    num.value++;
    console.log(num.value);
    
}

// watch(要监听的数据，数据更新的时候要执行的回调函数)   注意：watch监听的一定要是响应式的数据。不然会没反应。
watch(num,(newValue,oldValue)=>{
    console.log("新值",newValue);
    console.log("旧值",oldValue);
        
})
watch(name,(newVal,oldVal)=>{
    console.log("新值",newVal);
    console.log("旧值",oldVal);
    
    
})
const handclkName = ()=>{
    name.value+='佐伊'
}




</script>
 
<style lang = "less" scoped>
    
</style>